import React, { useEffect, useState } from "react"
import useInput from "../hooks/useInput"
import { useDispatch, useSelector } from "react-redux"
import { navigate } from "gatsby"
import '../../styles/chrome.css'

export default function Chrome() {
  const [visible, setVisible] = useState(false)
  const title = useInput("")
  const src = useInput("")
  const dispatch = useDispatch()
  const tagReducer = useSelector(state=>state.tagReducer)
  useEffect(() => {
    dispatch({ type: "loadTags" })
  }, [])
  function handleSubmit() {
    console.log('tagReducer')
    const titleValue = title.input.value
    const srcValue = src.input.value
    dispatch({
      type: "addTag",
      payload: { title: titleValue, src: srcValue },
    })
  }
  function handleVisible() {
    if (visible) {
      title.setValue('')
      src.setValue('')
    }
    setVisible(!visible)
  }
  function handleDel(e, id) {
    e.preventDefault();
    e.stopPropagation();
    dispatch({
      type: "delTag",
      payload: { id },
    })
  }
  return (
    <div className="auth-page">
      <div className="container page">
        <div className="row">
          <div className="col-md-6 offset-md-3 col-xs-12">
            <h1 className="text-xs-center">Google</h1>
            <input className="form-control form-control-lg" type="text" placeholder="搜索"/>
            <div className="tags-box">
              {/* <a className="tags-item" title="localhost" href="http://localhost:8000/">
                <cr-icon-button id="actionMenuButton" className="icon-more-vert" title="更多操作" tabindex="0" aria-disabled="false" role="button"></cr-icon-button>
                <cr-icon-button id="removeButton" className="icon-clear" title="移除" tabindex="0" hidden="" aria-disabled="false" role="button"></cr-icon-button>
                <div className="tile-icon">
                  <img draggable="false" src="chrome://favicon2/?size=24&amp;scale_factor=1x&amp;show_fallback_monogram=&amp;page_url=http%3A%2F%2Flocalhost%3A8000%2F"/>
                  <div className="query-tile-icon" draggable="false" hidden=""></div>
                </div>
                <div className="tile-title title-ltr">
                  <span>localhost</span>
                </div>
              </a> */}
              <div onClick={handleVisible} className="tags-item" title="localhost">
                <div className="tile-icon">+</div>
                <div className="tile-title title-ltr">
                  <span>添加快捷方式</span>
                </div>
              </div>
              {
                tagReducer.tags&&tagReducer.tags.map(item => (
                  <a key={item.id} className="tags-item" title={item.title} href={item.src}>
                    <div className="tile-icon">
                      <img draggable="false" src="/tag-img/002.jpg"/>
                      <div className="del" onClick={(e)=>handleDel(e, item.id)}>删除</div>
                    </div>
                    <div className="tile-title title-ltr">
                      <span>{item.title}</span>
                    </div>
                  </a>
                ))
              }
            </div>
          </div>
          <div className="add-dialog" style={{display:visible?"block":"none"}}>
            <form onSubmit={e=>e.preventDefault()}>
              <fieldset className="form-group">
                <h5>名称：</h5>
                <input
                  className="form-control form-control-xl"
                  type="text"
                  {...title.input}
                />
              </fieldset>
              <fieldset className="form-group">
                <h5>网址：</h5>
                <input
                  className="form-control form-control-xl"
                  type="text"
                  {...src.input}
                />
              </fieldset>
              <button onClick={handleSubmit} className="btn btn-xl btn-primary pull-xs-right">
                完成
              </button>
              <button className="btn btn-xl pull-xs-right">
                取消
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  )
}
